<template>
	<div class="server">
		<van-tabs v-model="active" animated :line-width="30" color="#FE7700" title-active-color="#FE7700">
			<van-tab :title="item.name" v-for="item in list" :key="item.id">
				<van-row>
					<van-col span="8" v-for="p in item.child" :key="p.id" class="van-ellipsis" @click="getUrl(p.url)">
						<img :src="p.iconimage" alt="">{{p.name}}
					</van-col>
					
				</van-row>
				<!-- <van-row>
					<van-col span="7">
						<img :src="online" alt="">在线服务
					</van-col>
					<van-col span="10">
						<img :src="online" alt="">在线服务
					</van-col>
					<van-col span="7">
						<img :src="online" alt="">在线服务
					</van-col>
				</van-row> -->
			</van-tab>
		<!-- 	<van-tab title="创新服务">内容 2</van-tab>
			<van-tab title="联合服务">内容 3</van-tab>
			<van-tab title="资讯服务">内容 4</van-tab> -->
		</van-tabs>
	</div>

</template>

<script>
	import online from "@/assets/img/online.png"
	import zixun from "@/assets/img/zixun.png"
	export default {
		name: "Server",
		components: {

		},
		data() {
			return {
				active: 0,
				online: online,
				zixun:zixun,
				list:[]
			}
		},
		mounted() {
			
			this.$api.home.navigation({type:23}).then(res => {
				// 执行某些操作
				if (res.code == 1) {
					this.list = res.data
				}
			
			})
			
		},
		methods:{
			getUrl(url){
				window.location.href = url
			}
		}


	}
</script>

<style scoped lang="less">
	.server {
		width: 95%;
		// height:8.56rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0rem 0rem 0rem rgba(206, 206, 206, 0.29);
		border-radius: 0.2rem;
		margin: 0.5rem auto;
		padding: 0.88rem 0.78rem;
	}
</style>
<style lang="less">
	.server {
		.van-ellipsis {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.van-tabs__content--animated{
			margin-top: 1.8rem;
		}
		.van-col--8,.van-col--10,.van-col--7{
			font-size:0.81rem;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(89,89,89,1);
			// display: inline-flex;
			// align-items: center;
			
			img{
				width: 0.91rem;
				margin-right: 0.56rem;
				vertical-align: middle;
			}
			
		}
		.van-row{
			margin-bottom: 1.63rem;
			&:last-child{
				margin-bottom:0;
			}
		}
	}
</style>
